<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div style=" height: 100%; padding: 20px;">
                    <a-form style="height:100%;">
                        <a-form-item :label="filterI18n('title','标题')">
                            <a-input v-model:value="title"></a-input>
                        </a-form-item>
                        <a-form-item :label="filterI18n('options','多选')">
                            <a-switch size="small" v-model:checked="settings.multiSelect"/>
                        </a-form-item>
                        <a-form-item :label="filterI18n('SourceValues','值来源')">
                            <a-radio-group :options="fromOptions" v-model:value="from"/>
                        </a-form-item>
                        <a-row v-show="from=='self'">
                            <a-col :span="24">
                                <a-form-item label="选项">
                                    <div>
                                        <div class="table-operator">
                                            <a-button @click="addRow">{{ filterI18n('newAdditions', '新增') }}</a-button>
                                            <a-button @click="removeRow">{{ filterI18n('delete', '删除') }}</a-button>
                                            <a-button @click="upRow">{{ filterI18n('upward', '向上') }}</a-button>
                                            <a-button @click="downRow">{{ filterI18n('down', '向下') }}</a-button>
                                        </div>
                                        <rx-grid ref="table" :data="dataSource" :columns="columns" style="min-height: 180px;">
                                            <template #nameSlot="{row}">
                                                <a-input v-model:value="row.name"/>
                                            </template>
                                            <template #keySlot="{row}">
                                                <a-input v-model:value="row.key"/>
                                            </template>
                                        </rx-grid>
                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='dic'">
                            <a-col :span="24">
                                <a-form-item :label="filterI18n('dataDicItem','数据字典项')">
                                    <rx-input-button v-model="dic" @btnClick="setDic" style="width: 100%;" type="tag" :singleValue="false"></rx-input-button>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='sql'">
                            <a-col :span="24">
                                <a-form-item :label="filterI18n('customSQL','自定义SQL')">
                                    <rx-input-button ref="sql" @btnClick="openCustomQuery" v-model="sql"
                                                     :singleValue="false"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='sql'">
                            <a-col :span="12">
                                <a-form-item :label="filterI18n('textField','文本字段')">
                                    <a-select :options="sqlFields" v-model:value="sql_textfield"
                                              :getPopupContainer="(p)=>p.parentNode" style="width: 90%"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item :label="filterI18n('numberField','数值字段')">
                                    <a-select :options="sqlFields" v-model:value="sql_valuefield"
                                              :getPopupContainer="(p)=>p.parentNode" style="width: 90%"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='sql'">
                            <a-col :span="24">
                                <a-form-item :label="filterI18n('paramConfig','参数配置')">
                                    <rx-grid ref="params" :data="paramsData" :columns="paramsColumns"
                                             style="min-height: 180px;">
                                        <template #bindVal="{row}">
                                            <a-select v-model:value="row.bindVal" :options="queryAry"
                                                      :getPopupContainer="(p)=>p.parentNode"/>
                                        </template>
                                    </rx-grid>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='grant'">
                            <a-col :span="24">
                                <a-form-item :label="filterI18n('permissType','权限类型')">
                                    <rx-input-button ref="grant" @btnClick="openFormEntityDataType" v-model="grant"
                                                     :singleValue="false"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-item :label="filterI18n('defaultValues','默认值')">
                                    <a-input v-model:value="defValue"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {ShareDialog} from '@lowcode/jpaas-share-component';
import filter from "./filter.js";
import ScreenApi from "@/api/screen-api";
import {RxGrid, RxInputButton, Util} from '@lowcode/jpaas-base-lib';

export default {
    name: "select-filter",
    mixins: [filter],
    components: {
        RxGrid,
        RxInputButton
    },
    data() {
        return {
            from: "self",
            fromOptions: [
                {'value': 'self', 'label': this.filterI18n('custom', '自定义')},
                {'value': 'dic', 'label': this.filterI18n('dict', '数据字典')},
                {'value': 'sql', 'label': this.filterI18n('customSQL', '自定义SQL')},
                {'value': 'grant', 'label': this.filterI18n('permissData', '权限数据')}
            ],
            //自定义
            dataSource: [],
            columns: [
                {title: this.filterI18n('name', '名称'), field: 'name', slots: {default: 'nameSlot'}},
                {title: this.filterI18n('idenName', '标识名'), field: 'key', slots: {default: 'keySlot'}}
            ],
            //数据字典
            dic: "",
            dicKey: "",
            //自定义查询
            sql: "",
            sql_textfield: "",
            sql_valuefield: "",
            paramsColumns: [
                {title: this.filterI18n('paramName', '参数名'), field: 'comment'},
                {title: this.filterI18n('bindValue', '绑定值'), field: 'bindVal', slots: {default: 'bindVal'}}
            ],
            paramsData: [],
            sqlFields: [],
            queryAry: [],
            //权限数据
            grant: ""
        }
    },
    methods: {
        filterI18n(name, text, key) {
            return this.$ti18(name, text, "filterControllerLang", key);
        },
        //初始化配置
        initSetting() {
            if (this.row.settings) {
                this.settings = this.row.settings;
                this.from = this.settings.from;
                //自定义
                if (this.settings.from == "self") {
                    this.dataSource = this.settings.dataSource;
                }
                //数据字典
                else if (this.settings.from == "dic") {
                    this.dic = this.settings.dic;
                    this.dicKey = this.settings.dicKey;
                }
                //自定义查询
                else if (this.settings.from == "sql") {
                    if (this.settings.sql) {
                        this.sql = this.settings.sql;
                        this.sql_textfield = this.settings.sql_textfield;
                        this.sql_valuefield = this.settings.sql_valuefield;
                        this.paramsData = this.settings.paramsData;
                        let sql = JSON.parse(this.settings.sql);
                        ScreenApi.getCustomQueryByKey({key: sql.value}).then(res => {
                            if (res.data) {
                                this.loadFields(res.data);
                            }
                        });
                    }
                }
                //权限数据
                else if (this.settings.from == "grant") {
                    this.grant = this.settings.grant;
                }
            } else {
                this.settings = {
                    from: "self",
                    multiSelect: false,
                }
            }
            for (let i = 0; i < this.paramMappings.length; i++) {
                this.queryAry.push({
                    label: this.paramMappings[i].label,
                    value: this.paramMappings[i].key,
                    type: this.paramMappings[i].type
                });
            }
        },
        //获取配置
        getSetting() {
            this.settings.from = this.from;
            if (this.settings.from == "self") {
                this.settings.dataSource = this.dataSource;
            } else if (this.settings.from == "dic") {
                this.settings.dicKey = this.dicKey;
                this.settings.dic = this.dic;
            } else if (this.settings.from == "sql") {
                this.settings.sql = this.sql;
                this.settings.sql_textfield = this.sql_textfield;
                this.settings.sql_valuefield = this.sql_valuefield;
                this.settings.paramsData = this.paramsData;
            } else if (this.settings.from == "grant") {
                this.settings.grant = this.grant;
            }
            return this.settings;
        },
        addRow() {
            this.dataSource.push({
                name: "",
                key: ""
            });
        },
        removeRow() {
            this.$refs.table.removeRows();
        },
        upRow() {
            this.$refs.table.moveUp();
        },
        downRow() {
            this.$refs.table.moveDown();
        },
        openCustomQuery(vm) {
            ShareDialog.openSqlDialog({
                curVm: this, widthHeight: ['1200px', '600px']
            }, function (self, data) {
                self.loadFields(data);
                self.sql = JSON.stringify({label: data.name, value: data.key});
            })
        },
        setDic(vm) {
            let conf = {
                curVm: this,
                data: {allowTree: false},
                widthHeight: ['800px', '600px'],
            }
            let self_ = this;
            ShareDialog.openSysDicDialog(conf, function (curVue, row) {
                self_.dicKey = row.alias;
                self_.dic = JSON.stringify({label: row.name, value: row.alias})
            })
        },
        loadFields(row) {
            let fieldStr = row.resultField;
            let whereStr = row.whereField;
            if (whereStr) {
                let self = this;
                let fields = JSON.parse(whereStr);
                fields.map(function (item) {
                    if (item.valueSource == 'param') {
                        let params = self.paramsData.find(obj => obj.fieldName == item.fieldName);
                        if (!params) {
                            self.paramsData.push(Object.assign(item, {bindVal: ""}));
                        }
                    }
                })
            }
            if (fieldStr) {
                let fields = JSON.parse(fieldStr);
                let ary = fields.map(function (item) {
                    return {
                        value: item.fieldName,
                        label: item.comment
                    }
                })
                this.sqlFields = ary;
            }
        },
        openFormEntityDataType(vm) {
            let self = this;
            let config = {curVm: this, widthHeight: ['800px', '600px'], data: {multiSelect: false}};
            ShareDialog.openFormEntityDataTypeDialog(config, function (row) {
                self.grant = JSON.stringify({label: row.name, value: row.id});
            })
        },
    },
    watch: {}
}
</script>

<style scoped>

</style>
